<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="./ttt_minmax.js"></script>
    <script src="./minmax.js"></script>
    <script src="./utils.js"></script>
    <!--<script src="./alg_1.js"></script>-->
    <script src="./alg_2.js"></script>

    <style>
        *{box-sizing: border-box}
        #bg{
            position: absolute;
        }
        #map{
            width: 450px;
            height: 450px;
            /*border: 1px red solid;*/
            position: fixed;
            top: 18px;
            left: 20px;
        }

        .row{
            display: flex;
            flex-direction: row;
        }
        .cell{
            width: 30px;
            height: 30px;
            /*border: 1px solid black;*/
            text-align: center;
            line-height: 30px;
            font-size: x-large;
        }
    </style>
</head>
<body>

<div id="bg">
    <img src="bg_board.png">
    <div id="map">
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
<!--        <div class="row">-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--            <div class="cell"></div>-->
<!--        </div>-->
    </div>
</div>

</body>
<script>

    /**
     * 分割 arr
     * [1,2,3,4,5,6,7] => [[1,2,3],[4,5,6],[7]]
     * @param arr
     * @param size
     */
    function sliceArrToMat2(arr, size) {
        let ret = [];
        let len = arr.length;
        if (len < 1) {
            return ret;
        }
        for (let i = 0; i < len; i += size) {
            ret.push(arr.slice(i, i + size));
        }
        return ret;
    }

    class Game {
        constructor(board) {
            this.board = board;
        }
    }


    // ai 先走
    let game = new Game(new Board());

    // 1是白色
    // 2是黑色
    // ---------------- start
    let celldivs;
    let cellGrid;
    window.onload = function () {
        console.log('------------------开始------------');

        //
        let mapEl = document.getElementById('map');
        for(let i = 0; i < Size;++i){
            let rowEl = document.createElement('div');
            rowEl.classList.add('row');
            for(let j = 0; j < Size;++j){
                let cellEl = document.createElement('div');
                cellEl.classList.add('cell');
                rowEl.appendChild(cellEl);
            }
            mapEl.appendChild(rowEl);
        }

        celldivs = document.getElementsByClassName('cell');
        console.log('celldivs:',celldivs.length);
        cellGrid = sliceArrToMat2(Array.prototype.slice.call(celldivs,0),Size);
        for(let i = 0; i < cellGrid.length;++i){
            for(let j = 0; j < cellGrid[i].length; ++j){
                let div = cellGrid[i][j];
                div.onclick = function () {
                    let cell = game.board.getCell(i,j);
                    if(cell.value !== 0){
                        console.log('请在空位置填');
                        return;
                    }

                    cell.value = 1;
                    showBoard();

                    // 判断玩家是否赢了?
                    if(isUserWin(cell)){
                        console.log('======玩家赢了==========');
                    }else{
                        //1s
                        setTimeout(()=>{
                            //
                            console.log('AI准备下:');
                            aiPlay();

                        },1000);
                    }
                }
            }
        }
        // start();
    };
    function start(){
        setTimeout(()=>{
            console.log('棋局开始...');
            aiPlay();
        },1000);
    }

    function aiPlay() {
        console.time('AI');
        let cell = alg_2.ai_choose(game.board,2);
        console.timeEnd('AI');
        cell.value = 2;
        showBoard();
        console.log(`电脑在${cell.rowIdx}-${cell.colIdx} 处骡落子`);
        if(isAIWin(cell)){
            console.log('======恭喜,AI获胜==============');
        }
    }

    function showBoard(){
        let arr = game.board.getResultArr();
        cellGrid.forEach((row,idx)=>{
            let rowValue = arr[idx];
            row.forEach((div,x)=>{
                let v = rowValue[x];
                if(v === 1){
                    div.innerHTML = `<img src="white.png">`;
                }else if(v === 2){
                    div.innerHTML = `<img src="black.png">`;
                }else if(v === 0){
                    celldivs[idx].html = '';
                }else{
                    console.error(`error v:${v}`);
                }
            })
        });
    }

    function isUserWin(cell) {
        let score = alg_2.getCellScore(alg_2.user_patterns,game.board,cell);
        return score >= 50000;
    }

    function isAIWin(cell) {
        let score = alg_2.getCellScore(alg_2.ai_patterns,game.board,cell);
        return score >= 50000;
    }
</script>
</html>
